import React, { useState } from "react";
function AudioControls() {
	let [volume, setVolume] = useState(0);
	let [base, setBase] = useState(3);
	let [mid, setMid] = useState(55);
	let [treble, setTreble] = useState(76);
	const makeLowerClick = (setFunc) => () =>
		setFunc((value) => (value - 1 < 0 ? 0 : value - 1));
	const makeHeigherClick = (setFunc) => () =>
		setFunc((value) => (value + 1 > 100 ? 100 : value + 1));
	return (
		<div>
			<div>
				<button onClick={makeLowerClick(setVolume)}>-</button>
				音量：
				{volume} <button onClick={makeHeigherClick(setVolume)}>+</button>
			</div>
			<div>
				<button onClick={makeLowerClick(setBase)}>-</button>
				低音：
				{base} <button onClick={makeHeigherClick(setBase)}>+</button>
			</div>
			<div>
				<button onClick={makeLowerClick(setMid)}>-</button>
				中音：
				{mid} <button onClick={makeHeigherClick(setMid)}>+</button>
			</div>
			<div>
				<button onClick={makeLowerClick(setTreble)}>-</button>
				高音：
				{treble} <button onClick={makeHeigherClick(setTreble)}>+</button>
			</div>
		</div>
	);
}
export default AudioControls;
